<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../03 layout/css/normalize.css">
    <style>
            *{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            a{
                text-decoration: none;
            }
            .nav{
                width: 1210px;
                height: 48px;
                margin: 100px auto;
                background-color: rgb(232,231,227);
            }
            
            .nav li{
                float: left;
                 /* 将文字在父元素中垂直居中 */
                line-height: 48px;
                
            }
            .nav a{
                display: block;
                font-size: 18px;
                color: #777777;
                background-color: rgb(232,231,227);
                padding: 0 38px;
            }
            .nav li:last-child a{
                 padding: 0 42px 0 43px;
            }
            .nav a:hover{
                background-color: rgb(63,63,63);
                color: rgb(232,231,227);
            }
            
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Serever Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
</body>
</html>